<template>
    <div>
        <!-- <el-form label-width="110px" size="small">
            <el-col class="form-row"> -->
        <el-form-item label="期限:">
            <!-- <RiskInputNumber :input="form.deadline" :inputAfter="'天'" :field="'deadline'" @getInputNumber="getInputNumber(arguments)">
                    </RiskInputNumber> -->
            <el-select v-model="form.deadline" size="small">
                <el-option v-for="item in deadlineSelectData" :key="item.dicKey" :label="item.dicKeyName" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="费率:">
            <RiskInputNumber :input="form.rate" :inputAfter="'%'" :field="'rate'" @getInputNumber="getInputNumber(arguments)"> </RiskInputNumber>
        </el-form-item>
        <el-form-item label="融出数量:">
            <RiskInputNumber
                :input="form.orderAmount"
                :inputAfter="'股'"
                :precision="2"
                :field="'orderAmount'"
                @getInputNumber="getInputNumber(arguments)"
            >
            </RiskInputNumber>
        </el-form-item>
        <el-form-item label="交易对手:">
            <el-select
                id="multiAndSearch"
                v-model="form.opponentCode"
                @change="getOpponentCode"
                filterable
                clearable
                remote
                :remote-method="getOpponentCode"
                :loading="selectLoading"
                size="mini"
                @visible-change="changeSelect"
            >
                <el-option v-for="i in opponentReport" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey"> </el-option>
            </el-select>
        </el-form-item>
        <!-- </el-col>
        </el-form> -->
    </div>
</template>
<script lang="ts">
import Invest from '@/common/dict/invest';
import { objToArr, SGU_CACHE } from '@/utils/diction-const-util';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import RiskInputNumber from '@/pages/risk-measure/components/risk-input-number.vue';
import { SelectOptionItemData } from '@/pages/risk-time/types/SelectOptionItemData';

@Component({
    name: 'RefinanceForm',
    components: {
        RiskInputNumber,
    },
})
// 转融通指令表单
export default class RefinanceForm extends Vue {
    @Prop()
    formDetail: any;

    // @Prop(Array)
    // businessTypeData: SelectOptionItemData[];

    form = {
        deadline: '', // 期限
        rate: '', // 费率
        orderAmount: '', // 融出数量
        opponentCode: '', // 交易对手
    };
    opponentReport: any[] = []; // 发行人下拉
    opponentReportState: boolean = false;
    deadlineSelectData: any[] = [
        {
            dicKey: '1',
            dicKeyName: '3天',
            value: '3',
        },
        {
            dicKey: '2',
            dicKeyName: '7天',
            value: '7',
        },
        {
            dicKey: '3',
            dicKeyName: '14天',
            value: '14',
        },
        {
            dicKey: '4',
            dicKeyName: '28天',
            value: '28',
        },
        {
            dicKey: '5',
            dicKeyName: '182天',
            value: '182',
        },
    ]; // 期限下拉数据

    mounted() {
        // 获取交易对手方
        this.getOpponentCode('');
        this.changeSelect(false);
    }

    @Watch('form', { immediate: true, deep: true })
    setForm(newValue, oldValue) {
        this.$emit('getForm', this.form, 'refinanceValues');
    }

    @Watch('formDetail', { immediate: true, deep: true })
    getForm(newValue, oldValue) {
        for (const key in this.form) {
            this.form[key] = this.formDetail[key];
        }
    }

    // 更改交易对手方选择框样式
    changeSelect(state: boolean) {
        let obj = document.getElementById('multiAndSearch').parentNode.querySelector('.el-select__caret');
        obj.classList.add('el-icon-arrow-up');
        if (state) {
            obj.classList.add('is-reverse');
        } else {
            obj.classList.remove('is-reverse');
        }
    }

    getInputNumber(args: any) {
        let value = args[0];
        let field = args[1];
        this.form[field] = value;
        if (field === 'orderAmount') {
            if (value === '0.00') {
                this.yh_message_warn('融出数量必须大于0！');
            }
        }
    }

    // 获取交易对手方信息
    private getOpponentCode(value: string) {
        this.opponentReportState = true;
        this.$axios
            .post('/dict/opponent/select', {
                dictKey: value,
                dictKeyName: value,
            })
            .then((res: any) => {
                this.opponentReport = res;
                this.opponentReportState = false;
            });
    }
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-measure/style/measure';
</style>
